// This `nav` tag is from the apollographql.com site. https://git.io/vAO3k
nav {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
	position: relative !important;
	.nav-header {
		display: none;
	}
}

.panel {
	#sidebar-panel-nav {
		.nav-menu {
			display: block;
		}

		.nav-header {
			display: none;
		}
	}
}

.nav-group.left {
	.nav-item {
		display: inline-block;
		line-height: 3rem;
	}
}

.nav {
	.std-xpadding;
	.transform(translate3d(0,0,0));
	.position(relative, 0, 0, auto, 0, auto, 4rem);
	text-align: center;
	z-index: 3;

  &.dark {
    color: @color-darker;
		border-bottom: 1px solid @color-mediumlight;

		a { .link(@color-darker); }
    svg { fill: @color-darkest; }

    .nav-item {
      cursor: pointer;
      display: inline-block;
      line-height: 3rem;
      height: 3rem;
      vertical-align: top;
      position: relative;

      & + .nav-item {
        margin-left: .75rem;
        @media screen and (min-width: @breakpoint) { margin-left: 1.875rem;  }
      }

      &.show-mobile + .nav-item {
        @media screen and (min-width: @breakpoint) {
          margin-left: 0;
        }
      }


      .link {
        .font-s2;
        line-height: 1;

        .type-semibold;
      }

      .btn {
        vertical-align: middle;
      }

      .icon-menu {
        .font-s3;
        line-height: 1;
        vertical-align: text-top;
      }
    }
  }

  &.light {
    color: @color-lightest;
		border-bottom: 1px solid rgba(255,255,255,.1);

		a { .link(@color-lightest); }
    svg { fill: @color-lightest; }
  }

  .nav-group {
    .position(absolute, .5rem, auto, auto, 0);
		.std-xpadding;
    z-index: 1;

    .nav-item.mobile-button:first-child {
      padding-right: 0.75rem;
    }

    &.right {
      left: auto;
      right: 0;
    }

		.logo {
			display: inline-block;
			height: 48px;
			width: auto;
			vertical-align: top;
			margin-right: 10px;
		}

		.logo-subbrand {
			display: none;
		}
  }
}
